<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5.5">
        <el-input v-model="inputId" clearable placeholder="输入文章编号或标题进行查询"
                  @change="getRepairInfoByID">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-date-picker v-model="minPrice" placeholder="选择发布时间区间">
          <el-option
            v-for="item in minPriceItems"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-date-picker>
      </el-col>
      <el-col :span="0.5" style="margin-top: 10px">
        ~
      </el-col>
      <el-col :span="3">
        <el-date-picker v-model="maxPrice" placeholder="选择发布时间区间">
          <el-option
            v-for="item in maxPriceItems"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="fuzzySearch"
          placeholder="模糊搜索房屋描述"
          @change="getRepairInfoFuzzySearch"
        >
          <el-select style="width: 140px" v-model="selectedType" slot="prepend" placeholder="输入房屋出租类型">
            <el-option v-for="selectItem in selectTypeItems"
                       :key="selectItem"
                       :label="selectItem"
                       :value="selectItem"></el-option>
          </el-select>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary"
                   plain
                   round
                   @click="getRepairInfoFuzzySearch"
        >{{ bottoninfo }}</el-button>
        <el-button type="primary"
                   plain
                   round
                   @click="clear"
        >清空</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      max-height="600px"
    >
      <el-table-column
        type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="出租单号">
              <span>{{ props.row.ra_id }}</span>
            </el-form-item>
            <br>
            <el-form-item label="房屋所有者名字">
              <span>{{ props.row.ra_user_name }}</span>
            </el-form-item>
            <br>
            <el-form-item label="出租类型">
              <span>{{ props.row.ra_type }}</span>
            </el-form-item>
            <br>
            <el-form-item label="户主描述">
              <span>{{ props.row.ra_desc }}</span>
            </el-form-item>
            <br>
            <el-form-item label="详细地址">
              <span>{{ props.row.ra_detail_address }}</span>
            </el-form-item>
            <br>
            <el-form-item label="价格">
              <span>{{ props.row.ra_media_url}}</span>
            </el-form-item>
            <br>
            <el-form-item label="房东联系方式">
              <span>{{ props.row.ra_contact }}</span>
            </el-form-item>
            <br>
            <el-form-item label="租客姓名">
              <span>{{ props.row.ra_repair_time }}</span>
            </el-form-item>
            <br>
            <el-form-item label="租客联系方式">
              <span>{{ props.row.ra_apply_time }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="ra_id"
        label="文章编号"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="ra_user_name"
        label="文章标题"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_user_name"
        label="文章作者"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_type"
        label="文章类型"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_type"
        label="发布时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_type"
        label="阅读量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_contact"
        label="点赞数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_apply_time"
        label="评论数"
        width="150">
      </el-table-column>
      <el-table-column
        prop="ra_state"
        label="订单状态"
        width="100">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" effect="dark"
                    :type="scope.row.ra_state===1?'success':(scope.row.ra_state==0?'':'danger')"
            >
              {{ scope.row.ra_state===1?'已派单':(scope.row.ra_state===0?'未处理':'被退回') }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.ra_state!==1">
            <el-button @click="showDialog(scope.row.ra_id)" type="text" size="small">派单</el-button>
            <el-button
              :disabled="scope.row.ra_state===-1?true:false"
              type="text"
              size="small"
              @click="dispatchReturn(scope.row.ra_id,scope)"
            >退回</el-button>
          </div>
          <div v-if="scope.row.ra_state===1">
            <el-button
              type="text"
              size="small"
              @click="ShowSearchRepairApply(scope.row.ra_id)">查询</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'PageManage',
  data () {
    return {
      bottoninfo: '查询所有',
      minPriceItems: [],
      maxPriceItems: [],
      minPrice: '',
      maxPrice: '',
      inputId: '',
      selectedType: '',
      selectTypeItems: ['政策性租赁房', '廉租房', '经济适用房', '两限两竞房', '保障性住房'],
      fuzzySearch: '',
      props: []
    }
  },
  mounted () {
    for (let i = 0; i < 10; i++) {
      this.minPriceItems.push(i * 1000)
    }
  },
  watch: {
    minPrice: function (New) {
      for (let i = New / 1000; i < 10; i++) {
        this.maxPriceItems.push(i * 1000)
      }
    }
  }
}
</script>

<style scoped>

</style>
